<template>
  <a-spin :spinning="spinning" tip="素材同步中，请耐心等待...">
    <a-card :bordered="false">
      <h3 style="margin-bottom: 20px;">发布官方内容</h3>
      <h4 class="title">{{ id == 'null' ? '新增' : '编辑' }}内容</h4>
      <a-form-model ref="rulesForm" :model="form" :rules="rules" :labelCol="{ lg: { span: 5 }, sm: { span: 7 } }" :wrapperCol="{ lg: { span: 16 }, sm: { span: 17 } }">
        <a-form-model-item label="内容类型" prop="contentType">
          <a-radio-group v-model="form.contentType" :disabled="id != 'null'">
            <a-radio value="0">图文内容</a-radio>
            <a-radio value="1">视频内容</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="身份标识" prop="identityId">
          <a-radio-group v-model="form.identityId" @change="onIdentityChange">
            <a-radio v-for="item in identityList.filter(e => e.id != 2 && e.id != 3)" :value="item.id" :key="item.id">{{item.identityName}}</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="发布人" prop="userId">
          <a-select v-model="form.userId" @change="onUserChange"  placeholder="请选择" show-search :filter-option="filterOption">
            <a-select-option v-for="item in userList" :value="item.id" :key="item.id">{{ item.userNickname }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item v-if="form.contentType == 0" label="图片" required>
          <JImageUpload :uploadParams="getUploadParams()" :isMultiple="true" :fileSize="10" :number="9" :accept="'image/*'" @fileChange="fileImageChange" v-model="imgList"></JImageUpload>
          <a @click="imgVisible=true" v-if="galleryImgList.length">选择其他搭配图</a>
          <div>*一套素材会关联很多图片，系统默认取出最新的8张图可选，可以重新上传也可以选用素材关联的其他图片</div>
        </a-form-model-item>
        <template v-if="form.contentType == 1">
          <a-form-model-item label="视频" required>
            <JImageUpload :uploadParams="getUploadParams()" :isMultiple="true" :fileSize="20" :number="1" :accept="'video/*'" @fileChange="fileVideoChange" v-model="videoList"></JImageUpload>
          </a-form-model-item>
          <a-form-model-item class="cover" label="视频封面图" required>
            <JImageUpload :isMove="false" :uploadParams="getUploadParams()" :isMultiple="true" :fileSize="20" :number="1" :accept="'image/*'" @fileChange="fileCoverChange" v-model="coverList"></JImageUpload>
            <a @click="videoVisible=true" v-if="galleryVideoList.length">选择其他视频</a>
            <div>一套素材会关联很多视频，系统默认取出最新的1个视频，可以重新上传也可以选用素材关联的其他视频</div>
          </a-form-model-item>
        </template>
        <a-form-model-item label="标题">
          <a-input v-model.trim="form.contentTitle" :maxLength="nameLimit" placeholder="" allowClear :suffix="`${nameNumber}/${nameLimit}`" />
        </a-form-model-item>
        <a-form-model-item label="正文内容" prop="bodyContent">
          <a-textarea v-model.trim="form.bodyContent" :maxLength="contentLimit" placeholder="" :rows="4" allowClear />
          <div style="text-align: right;">{{ `${contentNumber}/${contentLimit}` }}</div>
        </a-form-model-item>
        <a-form-model-item label="内容推广权限" prop="promote">
          <a-radio-group v-model="form.promote">
            <a-radio value="0">图片/视频不支持带商品推广</a-radio>
            <a-radio value="1">图片/视频支持带商品推广</a-radio>
          </a-radio-group>
          <div>*明星KOL等代言图，若不支持带商品推广，请正确设置推广权限，避免不必要的投诉</div>
        </a-form-model-item>
        <a-form-model-item label="其他渠道是否可用" prop="isUse">
          <a-radio-group v-model="form.isUse">
            <a-radio value="0">是</a-radio>
            <a-radio value="1">否</a-radio>
          </a-radio-group>
          <div>*设置该用户发布的内容是否支持其他渠道应用</div>
        </a-form-model-item>
        <a-form-model-item label="关联话题">
          <a-select v-model="form.topicId" placeholder="请选择" show-search :filter-option="filterOption">
            <a-select-option value="">不关联话题</a-select-option>
            <a-select-option :value="item.id" v-for="item in topicList" :key="item.id">
              {{ item.topicName }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="关联商品" required>
          <a-table bordered :pagination="false" :columns="productColumns" :data-source="form.communityTopicAssGoodsDtoList" :rowKey="(record, index) => index">
            <span class="product" slot="product" slot-scope="text, record, index">
              
              <img class="img" :src="record.contentGoodsDtoList ? record.contentGoodsDtoList.filter(e => e.productAttrId == record.productAttrId)[0].image : ''" alt="" />
              <div style="margin-left: 10px;flex: 1;">
                <div class="product-name">【{{ record.brandName }}】{{ record.productName }}</div>
                <a-form-model-item label="" :prop="`communityTopicAssGoodsDtoList.${index}.productAttrId`" :rules="{ required: true, message: '请选择', trigger: 'change' }">
                  <a-select v-model="record.productAttrId" style="width: 120px;" show-search :filter-option="filterOption">
                    <a-select-option :value="item.productAttrId" v-for="item in record.contentGoodsDtoList" 
                                    :key="item.productAttrId">
                  {{item.colorCode}}/{{item.colorName}}
                  </a-select-option>
                  </a-select>
                </a-form-model-item>
              </div>
            </span>
            <span slot="action" slot-scope="text, record, index">
              <a-icon type="arrow-up" @click="handleUp(index)" style="margin-bottom: 24px;margin-right: 5px;cursor: pointer;color: #1890FF;" />
              <a-icon type="arrow-down" @click="handleDown(index)" style="color: #1890FF;margin-bottom: 24px;cursor: pointer;margin-right: 15px;" />
              <a-popconfirm @confirm="handleRemoveProduct(index)">
                <template slot="title">
                  <p>确定删除该商品吗？</p>
                  <p>移除后，将不会同步该商品至买家秀</p>
                </template>
                <a>删除</a>
              </a-popconfirm>
            </span>
          </a-table>
          <a v-if="form.communityTopicAssGoodsDtoList.length < 5" @click="productVisible = true">添加关联商品</a>
        </a-form-model-item>
        <a-form-model-item label="内容外链">
          <a-select v-model="form.contentLink" placeholder="请选择" show-search :filter-option="filterOption">
            <a-select-option value="1">无外链</a-select-option>
            <a-select-option value="2">小程序路径</a-select-option>
            <a-select-option value="3">打开视频号</a-select-option>
            <a-select-option value="4">链接</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item v-if="form.contentLink != 1" label="外链文案" prop="linkCopy">
          <a-input v-model.trim="form.linkCopy" placeholder="填写外链展示的文案，最多10个字" allowClear :maxLength="10" />
        </a-form-model-item>
        <template v-if="form.contentLink == 2">
          <a-form-model-item label="小程序路径" prop="appletsPath">
            <a-input v-model.trim="form.appletsPath" placeholder="请保证使用/开头的小程序路径" allowClear />
          </a-form-model-item>
          <a-form-model-item label="小程序APPID">
            <a-input v-model.trim="form.appid" placeholder="未填写APPID，将使用顾客访问的小程序打开小程序路径" allowClear />
          </a-form-model-item>
        </template>
        <template v-if="form.contentLink == 3">
          <a-form-model-item label="视频号ID" prop="videoId">
            <a-input v-model.trim="form.videoId" placeholder="请填写视频号ID" allowClear />
          </a-form-model-item>
        </template>
        <template v-if="form.contentLink == 4">
          <a-form-model-item label="外链链接" prop="appletsPath">
            <a-input v-model.trim="form.appletsPath" placeholder="请确保域名已添加为小程序业务域名，并且保证http开头" allowClear />
          </a-form-model-item>
        </template>
        <h4 class="title">分享设置 <span>未定义该设置，将默认取首图和内容标题/正文做分享标题和图片</span></h4>
        <a-form-model-item class="share-img" label="小程序分享卡片图" >
          <JImageUpload
            :isMove="false"
            :uploadParams="getUploadParams()"
            :isMultiple="true"
            :fileSize="10"
            :number="1"
            :accept="'image/*'"
            @fileChange="fileShareImageChange"
            v-model="sharePhotosList"
          ></JImageUpload>
          <div style="margin-top: -15px;">500*400px</div>
        </a-form-model-item>
        <a-form-model-item label="小程序分享标题">
          <a-textarea v-model.trim="form.shareTitle" :maxLength="36" placeholder="小程序分享卡片展示的标题文案，最多36个字" :rows="3" allowClear />
        </a-form-model-item>
        <h4 class="title">发布设置</h4>
        <a-form-model-item label="发布时间" prop="release">
          <a-radio-group v-model="form.release">
            <a-radio value="0">立即发布</a-radio>
            <a-radio value="1">定时发布</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item v-if="form.release == 1" label="发布时间" prop="releaseTime">
          <a-date-picker v-model="form.releaseTime" show-time valueFormat="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" />
        </a-form-model-item>
        <a-form-model-item :wrapperCol="{ span: 24 }" style="text-align: center">
          <a-button style="margin-right: 8px" @click="handleBack">取消</a-button>
          <a-button htmlType="submit" @click="handleSubmit" type="primary">发布</a-button>
        </a-form-model-item>
        <div v-if="lookId && isMatch" style="color: orange;text-align: center;">*该LOOK已添加至商详页搭配模块中，继续发布可能会在商详页搭配模块和社区内容模块重复</div>
      </a-form-model>
      <a-modal title="添加关联商品" :visible="productVisible" width="500px" @ok="handleProductSubmit" @cancel="productVisible = false">
        <a-form-model ref="productForm" :model="productForm" :rules="productRules">
          <a-form-model-item prop="productNoSkc">
            <a-input v-model.trim="productForm.productNoSkc" placeholder="输入SKC进行添加" allowClear />
          </a-form-model-item>
        </a-form-model>
        <div>* 请保证添加的商品在伯俊已完善SKC信息，否则，将无法添加成功</div>
      </a-modal>
      <ImgList :imgList.sync="galleryImgList" :limit="9" :checkedImgList.sync="form.imgList" :visible.sync="imgVisible" @ok="checkedImgChange"></ImgList>
      <ImgList :isVideo="true" :imgList.sync="galleryVideoList" :limit="1" :checkedImgList.sync="form.videoList" :visible.sync="videoVisible" @ok="checkedVideoChange" ></ImgList>
    </a-card>
  </a-spin>
</template>
<script>
import JImageUpload from '../../components/JImageUpload'
import ImgList from '../../components/ImgList'
import {  contentDetails, contentAddOrUpdate, topicPage, checkskc, getLook, contentInformation, isMatch } from '@/api/micromall/communityContent'
import {  userList, identityList  } from '@/api/micromall/communityUser'
import { mapGetters } from 'vuex'
const productColumns = [
  {
    title: '序号',
    width: '80px',
    align: 'center',
    customRender: (text,record,index) => `${index+1}`
  },
  {
    title: '商品',
    width: '200px',
    scopedSlots: { customRender: 'product' }
  },
  {
    title: '款号',
    width: '120px',
    align: 'center',
    dataIndex: 'productNo'
  },
  {
    title: '操作',
    width: '120px',
    align: 'center',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  components: {
    JImageUpload,
    ImgList
  },
  data() {
    return {
      isMatch: false,
      identityList: [],
      id: this.$route.params.id,
      lookId: this.$route.query.lookId,
      sharePhotosList: [],
      coverList: [],
      userList: [],
      topicList: [],
      productForm: {},
      productRules: {
        productNoSkc: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
      },
      productVisible: false,
      nameLimit: 30,
      nameNumber: 0,
      contentLimit: 300,
      contentNumber: 0,
      state: this.$route.query.state,
      spinning: false,
      imgVisible: false,
      videoVisible: false,
      form: {
        isUse: '0',
        identityId: 1,
        release: '0',
        contentTitle: '',
        promote: '0',
        userId: '',
        releaseTime: '',
        contentLink: '1',
        contentType: this.$route.query.contentType || '0',
        bodyContent: '',
        imgList: [],
        videoList: [],
        communityTopicAssGoodsDtoList: [
        ],
        channel: 1
      },
      imgList: [],
      galleryImgList: [],
      galleryVideoList: [],
      videoList: [],
      galleryList: [],
      productColumns,
      rules: {
        isUse: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        identityId: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        contentType: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        userId: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        bodyContent: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        linkCopy: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        appletsPath: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        releaseTime: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        videoId: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        release: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        promote: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        channel: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
      }
    }
  },
  watch: {
  form: {
    handler: function () {
      const _this = this
      _this.nameNumber = _this.form.contentTitle.length
      _this.contentNumber = _this.form.bodyContent.length
    },
    deep: true
  }
},
  created() {
    this.getIdentityList()
   console.log(this.userInfo(), 'userInfo()')
    this.getTopicPage()
    this.getDetails()
    this.getLookImgOrVideo()
    this.getIsMatch()
  },
  computed: {
  },
  mounted() {
  },
  beforeDestroy() {
  },
  methods: {
    ...mapGetters(['nickname', 'avatar', 'userInfo']),
    
    // 需要判断该LOOK是否在微商城-更多搭配中已存在
    getIsMatch() {
      if (!this.lookId) return
      const data = {
        lookId: this.lookId
      }
      isMatch(data).then(res => {
        if (res.code === 200) {
          this.isMatch = res.data
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    // 查询身份下所有账号信息
    getContentInformation() {
      const data = {
        identityId: this.form.identityId
      }
      contentInformation(data).then(res => {
        if (res.code === 200) {
          this.userList = res.data
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    // 获取身份标识
    getIdentityList() {
      identityList({}).then(res => {
        if (res.code === 200) {
          this.identityList = res.data
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    onIdentityChange() {
      this.getContentInformation()
      this.form.userId = ''
      // if (this.id != 'null') return
    },

    // 发布人
    onUserChange() {
      const currentUser = this.userList.filter(e => e.id == this.form.userId)[0]
      console.log(currentUser, 'currentUser')
      this.form.isUse = currentUser.isUse
    },

    // 获取素材库关联图片或视频
    getLookImgOrVideo() {
      if (!this.lookId) return
      const data = {
        lookId: this.lookId
      }
      getLook(data).then(res => {
        if (res.code === 200) {
          const {galleryList, productList, look} = res.data
          this.galleryImgList = galleryList.filter(e => e.type === 0).map((i,index) => {
              return{...i, isChecked: false}
            })
          this.imgList = galleryList.filter(e => e.type === 0).map(e => e.url).slice(0, 9)
          this.galleryVideoList = galleryList.filter(e => e.type === 1).map((i,index) => {
              return{...i, isChecked: false}
          })
          this.videoList = galleryList.filter(e => e.type === 1).map(e => e.url).slice(0, 1)
          this.coverList = galleryList.filter(e => e.type === 1).map(e => e.videoImg).slice(0, 1)
          console.log(this.coverList, 'this.coverList')
          this.form.bodyContent = look && look.briefIntroduction ? look.briefIntroduction : ''
          productList.slice(0, 5).forEach(e => {
            checkskc({productNoSkc: e.productCode + e.productColor}).then(res => {
              if (res.code === 200) {
                const item = {
                    ...res.data,
                    id: null
                  }
                this.form.communityTopicAssGoodsDtoList.push(item)
              }
            })
          })
        } else {
          this.$message.error(res.msg || res.message)
        }
      })
    },

    // 获取话题
    getTopicPage() {
      const data = {
        current: 1,
        size: 1000,
        options: 1
      }
      topicPage(data).then(res => {
        if (res.code === 200) {
          this.topicList = res.data.records
        } else {
          this.$message.error(res.msg || res.message)
        }
      })
    },

    // 上移
    handleUp(index) {
      if (index === 0) return
      let temp = this.form.communityTopicAssGoodsDtoList[index - 1]
      this.$set(this.form.communityTopicAssGoodsDtoList, index - 1, this.form.communityTopicAssGoodsDtoList[index])
      this.$set(this.form.communityTopicAssGoodsDtoList, index, temp)
    },

    // 下移
    handleDown(index) {
      if (index === this.form.communityTopicAssGoodsDtoList.length - 1) return
      let i = this.form.communityTopicAssGoodsDtoList[index + 1]
      this.$set(this.form.communityTopicAssGoodsDtoList, index + 1, this.form.communityTopicAssGoodsDtoList[index])
      this.$set(this.form.communityTopicAssGoodsDtoList, index, i)
    },

    // 关联商品
    handleProductSubmit() {
      this.$refs.productForm.validate(valid => {
        if (valid) {
          const data = {
            ...this.productForm
          }
          this.productVisible = false
          checkskc(data).then(res => {
            if (res.code === 200) {
              this.productForm = {}
              const item = {
                  ...res.data,
                  id: null
                }
              this.form.communityTopicAssGoodsDtoList.push(item)
            } else {
              // this.$message.info('添加的商品未在伯俊完善SKU信息，添加失败！')
              this.$message.error(res.msg || res.message)
            }
          })
          // 添加成功
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    },

    // 获取详情
    getDetails() {
      if (this.id == 'null') {
        this.getContentInformation()
        return
      }
      const data = {
        id: this.id
      }
      contentDetails(data).then(res => {
        if (res.code === 200) {
          const {pictureVideo, cover, contentType, sharePhotos, topicId, identityId, userId} = res.data
          this.form = {
            ...res.data,
            topicId: topicId == -1 ? '' : topicId,
            identityId: identityId ? Number(identityId) : '',
            userId: userId ? userId.toString() : ''
          }
          this.videoList = (contentType != 0 && pictureVideo) ?pictureVideo.split(','): []
          this.coverList = cover
          this.imgList = (contentType == 0 && pictureVideo) ? pictureVideo.split(',') : []
          this.sharePhotosList = sharePhotos ? sharePhotos.split(',') : []
          this.getContentInformation()
        } else {
          this.$message.error(res.msg || res.message)
        }
      }).catch(err => {
      })
    },

    // 选择搭配图
    checkedImgChange(v) {
      this.imgList= this.form.imgList.concat(v).map(e => e.url)
    },

    // 选择搭视频
    checkedVideoChange(v) {
      this.videoList= v.map(e => e.url)
    },

    // 移除关联商品
    handleRemoveProduct(index) {
      this.form.communityTopicAssGoodsDtoList.splice(index, 1)
    },

    getUploadParams() {
      return {
          actionUrl: 'https://jic.jnby.com/activity/market-act/common/upload/multipart',
          headers: {
            authorization: 'authorization-text'
          },
          uploadHost: 'https://img.bzhz.jnbygroup.com/'
        }
    },
    // 图片change
    fileImageChange(list) {
      this.form.imgList = list
    },

    //视频change
    fileVideoChange(list) {
      this.form.videoList = list
      if (list[0] && list[0].url && list[0].url.includes('aliyuncs')) {
        this.coverList = list[0].url + '?x-oss-process%3Dvideo%2Fsnapshot%2Ct_0%2Cf_jpg%2Cm_fast'
      }
    },

    // 分享图片change
    fileShareImageChange(list) {
      this.form.sharePhotos = list.length ? list[0].url : ''
    },

    // 视频封面change
    fileCoverChange(list) {
      this.form.cover = list.length ? list[0].url : ''
    },

    // 确认同步
    handleSubmit() {
      this.$refs.rulesForm.validate(valid => {
        if (valid) {
          const { contentType, imgList, videoList, contentLink, communityTopicAssGoodsDtoList, cover, sharePhotos, release, releaseTime } = this.form
          if (contentType == 0 && !imgList.length) {
            this.$message.error('请上传图片！')
            return
          }
          if (contentType == 1 && !videoList.length) {
            this.$message.error('请上传视频！')
            return
          }
          if (contentType == 1 && !cover) {
            this.$message.error('请上传视频封面！')
            return
          }
          // if (contentType == 1 && !sharePhotos) {
          //   this.$message.error('请上传小程序分享卡片图！')
          //   return
          // }
          if (!communityTopicAssGoodsDtoList.length) {
            this.$message.error('无关联商品！')
            return
          }
          if (this.contentNumber > this.contentLimit) {
            this.$message.error('正文内容字数超出限制！')
            return
          }
          communityTopicAssGoodsDtoList.forEach(e => {
            const contentGoodsDtoListFilterLlist = e.contentGoodsDtoList.filter(i => e.productAttrId == i.productAttrId)
            e.image = contentGoodsDtoListFilterLlist.length ? contentGoodsDtoListFilterLlist[0].image : ''
            delete e.contentGoodsDtoList
          })
          let link = {}
          switch(contentLink) {
            case 1:
              link = {
                linkCopy: null,
                appletsPath: null,
                appid: null,
                videoId: null
              }
              break;
            case 2:
              link = {
                videoId: null
              }
              break;
            case 3:
              link = {
                appletsPath: null,
                appid: null,
              }
              break;
              case 4:
              link = {
                appid: null,
                videoId: null
              }
              break;
            }
          const data = {
            ...this.form,
            pictureVideo: contentType == 0 ? imgList.map(e => e.url).join(',') : videoList.map(e => e.url).join(','),
            ...link,
            communityTopicAssGoodsDtoList,
            imgList: null,
            videoList: null,
            releaseTime: release == 1 ? releaseTime : null,
            lookId: this.lookId ? this.lookId : (this.form.lookId || null),
            updateId: this.userInfo().id,
            updateName: this.userInfo().realname,
            status: 2
          }
          console.log(this.form.lookId, 'this.form.lookId')
          this.spinning = true
          contentAddOrUpdate(data).then(res => {
            if (res.code === 200) {
              this.$router.go(-1)
            } else {
              this.spinning = false
              this.$message.error(res.msg || res.message)
            }
          }).catch(err => {
            this.spinning = false
          })
        } else {
          this.$message.error('表单有未填项！')
          console.log('error submit!!');
          return false;
        }
      })
    },

    //返回
    handleBack() {
      this.$router.go(-1)
    },

    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
  }
}
</script>
<style lang="less" scoped>
.ant-spin-nested-loading /deep/ .ant-spin {
  top: 50%;
  transform: translateY(-50%);
}
/deep/.ant-tag {
  cursor: pointer;
}
.title {
  font-size: 15px;
  span {
    color: #999;
    font-size: 14px;
    font-weight: normal;
  }
}
.product {
  .img {
    display: block;
    margin: 0 2px;
    width: 60px;
    height: 60px;
    border: 1px dashed #f5f5f5;
    object-fit: scale-down;
    cursor: pointer;
  }
}

.remarks {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  word-break: break-all; /* 追加这一行代码 */
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}
.product {
  display: flex;
  overflow: hidden;
  .img {
    margin: 0;
  }
  .product-name {
    flex: 1;
    margin-left: 5px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    word-break: break-all; /* 追加这一行代码 */
    /* autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
  }
}
.share-img /deep/ .ant-upload-list-picture-card .ant-upload-list-item {
  height: 80px;
}
.share-img /deep/ .ant-upload.ant-upload-select-picture-card {
  height: 80px;
}
.share-img /deep/ .ant-upload-list-picture-card-container {
  height: 80px;
}
.share-img /deep/ .my-img-item {
  margin: 0 8px 8px 0;
}
.cover /deep/ .my-img-item {
  margin: 0 8px 8px 0;
}
</style>
